<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const userInfo = computed(() => userStore.userInfo)

// 控制侧边栏折叠状态
const isCollapse = ref(false)
const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value
}

// 模拟菜单数据
const menuList = [
  {
    id: '1',
    title: '控制台',
    icon: 'el-icon-menu',
    path: '/dashboard'
  },
  {
    id: '2',
    title: '用户管理',
    icon: 'el-icon-user',
    path: '/users'
  },
  {
    id: '3',
    title: '数据统计',
    icon: 'el-icon-data-line',
    path: '/statistics'
  },
  {
    id: '4',
    title: '系统设置',
    icon: 'el-icon-setting',
    path: '/settings'
  }
]

// 登出
const handleLogout = () => {
  userStore.logout()
  router.push('/login')
}
</script>

<template>
  <el-container class="layout-container">
    <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '64px' : '220px'" class="aside">
      <div class="logo-container">
        <img src="@/assets/logo.svg" class="logo" alt="Logo" />
        <span v-if="!isCollapse" class="title">管理系统</span>
      </div>
      
      <el-menu
        :default-active="$route.path"
        :collapse="isCollapse"
        class="sidebar-menu"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
      >
        <el-menu-item v-for="item in menuList" :key="item.id" :index="item.path">
          <el-icon><component :is="item.icon"></component></el-icon>
          <template #title>{{ item.title }}</template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    
    <el-container>
      <!-- 头部 -->
      <el-header class="header">
        <div class="header-left">
          <el-button type="text" @click="toggleSidebar">
            <el-icon><component :is="isCollapse ? 'Expand' : 'Fold'"></component></el-icon>
          </el-button>
          <h2 class="welcome">欢迎使用管理系统</h2>
        </div>
        
        <div class="header-right">
          <el-dropdown trigger="click">
            <div class="avatar-box">
              <el-avatar :size="36" :src="userInfo.avatar" />
              <span class="username">{{ userInfo.username }}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      
      <!-- 内容区域 -->
      <el-main class="main">
        <div class="dashboard-container">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" v-for="i in 4" :key="i">
              <el-card class="data-card">
                <div class="data-item">
                  <div class="data-icon" :class="`bg-${i}`">
                    <el-icon><component :is="['Monitor', 'User', 'ShoppingCart', 'Money'][i-1]"></component></el-icon>
                  </div>
                  <div class="data-info">
                    <span class="data-title">{{ ['访问量', '用户数', '订单量', '销售额'][i-1] }}</span>
                    <h3 class="data-value">{{ [5276, 3690, 1854, '￥138,432'][i-1] }}</h3>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          
          <el-row :gutter="20" class="chart-row">
            <el-col :xs="24" :lg="12">
              <el-card class="chart-card">
                <template #header>
                  <div class="card-header">
                    <span>用户趋势</span>
                  </div>
                </template>
                <div class="chart-placeholder">
                  图表区域（实际项目中可以使用ECharts等库）
                </div>
              </el-card>
            </el-col>
            
            <el-col :xs="24" :lg="12">
              <el-card class="chart-card">
                <template #header>
                  <div class="card-header">
                    <span>销售统计</span>
                  </div>
                </template>
                <div class="chart-placeholder">
                  图表区域（实际项目中可以使用ECharts等库）
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  
  .aside {
    transition: width 0.3s;
    background-color: #304156;
    overflow: hidden;
    
    .logo-container {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      
      .logo {
        width: 32px;
        height: 32px;
      }
      
      .title {
        margin-left: 10px;
        color: white;
        font-size: 18px;
        font-weight: bold;
        white-space: nowrap;
      }
    }
    
    .sidebar-menu {
      border-right: none;
    }
  }
  
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    padding: 0 20px;
    
    .header-left {
      display: flex;
      align-items: center;
      
      .welcome {
        font-size: 18px;
        margin-left: 15px;
        font-weight: normal;
      }
    }
    
    .header-right {
      .avatar-box {
        display: flex;
        align-items: center;
        cursor: pointer;
        
        .username {
          margin-left: 8px;
          font-size: 14px;
        }
      }
    }
  }
  
  .main {
    background-color: #f0f2f5;
    padding: 20px;
    
    .dashboard-container {
      .data-card {
        margin-bottom: 20px;
        
        .data-item {
          display: flex;
          align-items: center;
          
          .data-icon {
            width: 48px;
            height: 48px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            
            .el-icon {
              font-size: 24px;
              color: white;
            }
          }
          
          .bg-1 { background-color: #40c9c6; }
          .bg-2 { background-color: #36a3f7; }
          .bg-3 { background-color: #f4516c; }
          .bg-4 { background-color: #34bfa3; }
          
          .data-info {
            .data-title {
              font-size: 14px;
              color: #999;
            }
            
            .data-value {
              margin: 8px 0 0 0;
              font-size: 20px;
              font-weight: bold;
            }
          }
        }
      }
      
      .chart-row {
        margin-top: 10px;
      }
      
      .chart-card {
        margin-bottom: 20px;
        
        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        
        .chart-placeholder {
          height: 300px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #999;
          background-color: #fafafa;
          border-radius: 4px;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .layout-container {
    .header {
      padding: 0 10px;
      
      .header-left {
        .welcome {
          font-size: 16px;
          display: none;
        }
      }
      
      .header-right {
        .avatar-box {
          .username {
            display: none;
          }
        }
      }
    }
    
    .main {
      padding: 10px;
    }
    
    .dashboard-container {
      .data-card {
        .data-item {
          .data-icon {
            width: 40px;
            height: 40px;
          }
          
          .data-info {
            .data-value {
              font-size: 18px;
            }
          }
        }
      }
      
      .chart-card {
        .chart-placeholder {
          height: 200px;
        }
      }
    }
  }
}
</style> 